<template>
	<view class="m30">
		<view class="flex-jus">
			<view class="p20 flex1 bgFff radius30 mr20">
				<u-input v-model="keyword" placeholder="请输入邀请码加入组织" border="none"></u-input>
			</view>
			<view>
				<u-button color="linear-gradient(170deg, #FFA5F5, #319EFF)"
					:customStyle="{'height':'80rpx','borderRadius':'30rpx','padding':'0 50rpx'}" @click="getOrgByInviteCode">加入</u-button>
			</view>
		</view>
		<view class="mt30" v-if="myOrg">
			<view class="radius30 bgFff p20 mb20" >
				<view class="flex">
					<u-image :src="myOrg.logo" width="100rpx"
						height="100rpx" radius="10"></u-image>
					<view class="ml30 flex-jus flex1 flex-start">
						<view>
							<view class="c343 f28">{{myOrg.name}}</view>
							<u-gap height="10"></u-gap>
							<view class="c666 f26">{{myOrg.address}}</view>
						</view>
						<view>
							<u-tag :text="statusList[myOrg.status].name" shape="circle" size="large"
								:borderColor="statusList[myOrg.status].bgColor"
								:bgColor="statusList[myOrg.status].bgColor" :color="statusList[myOrg.status].color"
								:type="statusList[myOrg.status].type"></u-tag>
						</view>
					</view>
				</view>
				<u-line color="#eee" margin="20rpx 0"></u-line>
				<view class="flex-jus">
					<text class="f24 c666">{{myOrg.joinedDate}} 加入</text>
					<view v-if="myOrg.status == 1">
						<u-button color="#34314F" sha shape="circle" :customStyle="{'height':'60rpx'}"
							@click="openExitMOodal">退出组织</u-button>
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="showExitModal" title="提示">
			<view class="textC c343">
				<view class="mt30">确定退出该组织吗？</view>
			</view>
			<view slot="confirmButton">
				<view class="flex-jus mt20">
					<view class="flex1 mr10">
						<u-button type="" shape="circle" color="#F4F4F5"
							:customStyle="{'height':'80rpx','color':'#34314F'}" @click="close">取消</u-button>
					</view>
					<view class="flex1 ml10">
						<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
							:customStyle="{'height':'80rpx'}" @click="quitOrgBtn">确认</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<u-modal v-if="showAddModal" :show="showAddModal" title="加入组织">
			<view class="c343 textL width100">
				<view class="mb10">
					<text class="bold">组织名称：</text>
					<text>{{orgInfo.name}}</text>
				</view>
				<view class="mb10">
					<text class="bold">组织地点：</text>
					<text>{{orgInfo.address}}</text>
				</view>
				<view class="mb10">
					<text class="bold">组织介绍：</text>
					<text>{{orgInfo.content}}</text>
				</view>
			</view>
			<view slot="confirmButton">
				<view class="flex-jus">
					<view class="flex1 mr10">
						<u-button type="" shape="circle" color="#F4F4F5"
							:customStyle="{'height':'80rpx','color':'#34314F'}" @click="close">取消</u-button>
					</view>
					<view class="flex1 ml10">
						<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
							:customStyle="{'height':'80rpx'}" @click="applyOrgBtn">确认加入</u-button>
					</view>
				</view>
			</view>
		</u-modal>
		<u-popup :show="showRzPop" @close="showRzPop = false" @open="open('show_success')" mode="center" round="20"
			:customStyle="{'width':'80%'}" bgColor="transparent">
			<view class="pore">
				<image src="https://hxs.dsjhs.com:553/prod-api/profile/yujian/rzBg.png" mode="widthFix" class="width100"></image>
				<view class="rz-box flex-au">
					<view class="width100 textC p30">
						<view class="c343 bold mb20">Hi～您需要实名认证 <br> 才能加入组织哦</view>
						<view class="c999 f24 mt20">只需1分钟，简单几步即可完成</view>
						<u-gap height="10"></u-gap>
						<view class="flex-jus mt20">
							<view class="flex1 mr10">
								<u-button type="" shape="circle" color="#F4F4F5"
									:customStyle="{'height':'80rpx','color':'#34314F'}" @click="close">暂不认证</u-button>
							</view>
							<view class="flex1 ml10">
								<u-button type="" shape="circle" color="linear-gradient(170deg, #FFA5F5, #319EFF)"
									:customStyle="{'height':'80rpx'}" @click="close">立即认证</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getOrgLogByUid,getOrgByInviteCode,applyOrg,quitOrg} from '@/common/api_meethuangshi.js'
	export default {
		name: '',
		data() {
			return {
				myOrg: null,
				keyword: '',//bTWdX720
				orgInfo:null,
				showAddModal:false,
				showExitModal: false,
				showRzPop: false,
				statusList: {
					0: {
						type: 'primary',
						name: '待审核',
						bgColor:'#EAF5FF',
						color:'#319EFF'
					},
					1: {
						type: 'success',
						name: '审核通过',
						bgColor:'#F3F3F5',
						color:'#19be6b'
					},
					2: {
						type: 'info',
						name: '审核不通过',
						bgColor:'#F3F3F5',
						color:'#34314F'
					}
				},
			}
		},
		onLoad(option) {
			this.getOrgLogByUid()
		},
		methods: {
			async getOrgLogByUid(){
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await getOrgLogByUid({
					userId:userId
				})
				if (res.code === 200) {
					this.myOrg = res.data;
				}
			},
			async getOrgByInviteCode(){
				if(!this.keyword){
					uni.showToast({
						title:'请输入邀请码',
						icon:'none'
					})
					return false;
				}
				uni.showLoading({
					mask:true
				})
				const res = await getOrgByInviteCode({
					code:this.keyword
				})
				if (res.code === 200) {
					this.orgInfo = res.data;
					this.showAddModal = true;
					uni.hideLoading()
				}
			},
			async applyOrgBtn(){
				uni.showLoading({
					mask:true
				})
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await applyOrg({
					userId,
					organizeId:this.orgInfo.id
				})
				if (res.code === 200) {
					this.getOrgLogByUid()
					this.close()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			openExitMOodal() {
				this.showExitModal = true;
			},
			close() {
				this.showExitModal = false;
				this.showRzPop = false;
				this.showAddModal = false;
			},
			async quitOrgBtn(){
				uni.showLoading({
					mask:true
				})
				const userId = await this.getUserId()
				if (!userId) {
					console.log('用户信息获取失败或用户未登录')
					return
				}
				const res = await quitOrg({
					userId
				})
				if (res.code === 200) {
					this.getOrgLogByUid()
					this.close()
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.rz-box {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 80rpx;
		left: 0;
	}
</style>